<template>
  <el-config-provider :locale="zhCn">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in" @after-leave="onAfterLeave">
        <component :is="Component" />
      </transition>
    </router-view>
    <regist :bIsShow="isShowRegister" @close="onCloseRegister"></regist>
    <login :bIsShow="isShowLogin" @close="onCloseLogin"></login>
    <reset-password-layout></reset-password-layout>
  </el-config-provider>
</template>


<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import Regist from '@/views/child/login/regist-layout.vue'
import Login from '@/views/child/login/login-layout.vue'
import ResetPasswordLayout from '@/views/child/login/reset-password-layout.vue'
import { useWebUserStore } from '@/store/web/user'
import { getPxOVwByValue, EventBus } from '@/utils'

const useWebUser = useWebUserStore()
const isShowLogin = computed(() => {
  return useWebUser.isShowLogin
})
const isShowRegister = computed(() => {
  return useWebUser.isShowRegister
})
const onAfterLeave = () => {
  // this.$root.$emit('triggerScroll')
}
const onShowLogin = () => {
  useWebUser.updateLoginStatus(true)
}
const onShowRegister = () => {
  useWebUser.updateRegisterStatus(true)
}
const onCloseRegister = () => {
  useWebUser.updateRegisterStatus(false)
}
const onCloseLogin = () => {
  useWebUser.updateLoginStatus(false)
}
const initCssVar = () => {
  const arr = [-2,-4,-6,-8,-20,-26,-28,-30,-32,-36,-40,-50,-70,2,4,6,8,10,12,14,16,18,20,22,24,26,28,30,32,34,36,38,40,42,44,48,50,52,54,56,58,60,70,80,84,90,72,78,100,104,106,108,120,132,136,140,150,156,160,170,190,192,230,300,330,420,450,500,510,750]
    const docStyle = document.documentElement.style
    _.forEach(arr, (num: number) => {
      docStyle.setProperty(`--size-${num}`, getPxOVwByValue(num))
    })
    const initAPLayerCssObj = {
      "aplayer-author-size": 24,
      "aplayer-title-size": 28,
      "aplayer-lrc-height": 70,
      "aplayer-lrc-size": 24,
      "aplayer-lrc-line-height": 48,
      "aplayer-lrc-active-size": 28,
      "aplayer-pic-top": 100,

      "van-padding-base": 4,
      "van-padding-xs": 8,
      "van-padding-sm": 12,
      "van-padding-md": 16,
      "van-padding-lg": 24,
      "van-padding-xl": 32,

      "van-font-size-xs": 10,
      "van-line-height-xs": 14,
      "van-line-height-sm": 18,
      "van-line-height-md": 20,
      "van-line-height-lg": 22,

      "van-border-width-base": 1,
      "van-border-radius-sm": 2,
      "van-border-radius-md": 4,
      "van-border-radius-lg": 8,
      "van-border-radius-max": 999,

      "van-font-size-lg": 32,
      "van-font-size-md": 28,
      "van-font-size-sm": 24,
      "van-field-text-area-min-height": 12,
      "van-calendar-header-title-height": 88,
      "van-calendar-day-height": 128,
      "van-calendar-month-mark-font-size": 320,
      "van-calendar-weekdays-height": 60,
      "van-calendar-selected-day-size": 108,
      "van-calendar-confirm-button-height": 72,
      "van-dropdown-menu-height": 48,

      "van-uploader-size": 160,
      "van-uploader-icon-size": 48,
      "van-uploader-delete-icon-size": 28,
      "van-uploader-file-icon-size": 40,
      "van-uploader-mask-icon-size": 44,
      "van-uploader-loading-icon-size" : 44,

      "van-button-mini-height": 48,
      "van-button-small-height": 64,
      "van-button-large-height": 100,
      "van-button-default-height": 88,
      "van-button-loading-icon-size": 40,

      "van-toast-icon-size": 72,
      "van-toast-text-min-width": 192,
      "van-toast-default-width": 176,
      "van-toast-default-min-height": 176,

      "van-checkbox-size": 40,
      "van-radio-size": 40,
      "van-field-icon-size": 32,
      "van-field-clear-icon-size": 32,
      "van-field-error-message-font-size": 24,
      // "van-field-text-area-min-height": 120,
      "van-field-word-limit-line-height": 32,
      "van-address-list-item-font-size": 26,
      "van-address-list-edit-icon-size": 40,

      "van-switch-size": 60,
      "van-loading-spinner-size": 60,

      "van-dialog-width": 640,
      "van-dialog-border-radius": 32,
      "van-dialog-header-line-height": 48,
      "van-dialog-header-padding-top": 52,
      "van-dialog-button-height": 96,
      "van-dialog-round-button-height": 72,
      "van-dialog-message-font-size": 32
    }
    _.forEach(initAPLayerCssObj, (num: number, key: string) => {
      docStyle.setProperty(`--${key}`, getPxOVwByValue(num))
    })
}

const initComp = () => {
  initCssVar()
  EventBus.$on("login", onShowLogin)
  EventBus.$on("register", onShowRegister)
}

initComp()

</script>
